<template>
  <div class="settings-page" :class="{ 'dark-theme': isDarkMode }">
    <div class="page-header">
      <h2>系统设置</h2>
      <div class="auto-save-status" :class="{ saving: isSaving, saved: showSaved }">
        <span v-if="isSaving">🔄 自动保存中...</span>
        <span v-else-if="showSaved">✅ 已保存</span>
        <span v-else>💾 自动保存</span>
      </div>
    </div>

    <div class="settings-grid">
      <!-- 基础设置 -->
      <div class="settings-section">
        <h3>基础设置</h3>
        <div class="settings-form">
          <div class="form-group">
            <label>网站名称</label>
            <input type="text" v-model="settings.siteName" placeholder="请输入网站名称">
          </div>
          <div class="form-group">
            <label>网站描述</label>
            <textarea v-model="settings.siteDescription" placeholder="请输入网站描述"></textarea>
          </div>
          <div class="form-group">
            <label>联系邮箱</label>
            <input type="email" v-model="settings.contactEmail" placeholder="请输入联系邮箱">
          </div>
          <div class="form-group">
            <label>客服电话</label>
            <input type="tel" v-model="settings.phoneNumber" placeholder="请输入客服电话">
          </div>
        </div>
      </div>

      <!-- 系统配置 -->
      <div class="settings-section">
        <h3>系统配置</h3>
        <div class="settings-form">
          <div class="form-group">
            <label>时区设置</label>
            <select v-model="settings.timezone">
              <option value="Asia/Shanghai">中国标准时间 (GMT+8)</option>
              <option value="America/New_York">美国东部时间 (GMT-5)</option>
              <option value="Europe/London">英国时间 (GMT+0)</option>
              <option value="Asia/Tokyo">日本时间 (GMT+9)</option>
            </select>
          </div>
          <div class="form-group">
            <label>语言设置</label>
            <select v-model="settings.language">
              <option value="zh-CN">简体中文</option>
              <option value="en-US">English</option>
              <option value="ja-JP">日本語</option>
              <option value="ko-KR">한국어</option>
            </select>
          </div>
          <div class="form-group">
            <label>主题设置</label>
            <div class="theme-options">
              <div class="theme-option" :class="{ active: settings.theme === 'light' }" @click="settings.theme = 'light'">
                <div class="theme-preview light"></div>
                <span>浅色主题</span>
              </div>
              <div class="theme-option" :class="{ active: settings.theme === 'dark' }" @click="settings.theme = 'dark'">
                <div class="theme-preview dark"></div>
                <span>深色主题</span>
              </div>
            </div>
            <div class="theme-preview-area">
              <p>当前主题预览：</p>
              <div class="preview-card" :class="settings.theme">
                <h4>示例卡片</h4>
                <p>这是{{ settings.theme === 'dark' ? '深色' : '浅色' }}主题的效果预览</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 安全设置 -->
      <div class="settings-section">
        <h3>安全设置</h3>
        <div class="settings-form">
          <div class="form-group">
            <label>密码策略</label>
            <div class="checkbox-group">
              <label class="checkbox-item">
                <input type="checkbox" v-model="settings.passwordPolicy.minLength">
                <span>最小长度8位</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="settings.passwordPolicy.requireUppercase">
                <span>包含大写字母</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="settings.passwordPolicy.requireNumbers">
                <span>包含数字</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="settings.passwordPolicy.requireSpecialChars">
                <span>包含特殊字符</span>
              </label>
            </div>
            <div class="policy-strength">
              <span>密码强度要求：{{ passwordStrengthText }}</span>
              <div class="strength-bar">
                <div class="strength-fill" :style="{ width: passwordStrength + '%' }" :class="strengthClass"></div>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label>登录失败限制</label>
            <input type="number" v-model="settings.maxLoginAttempts" min="3" max="10" placeholder="最大失败次数">
          </div>
          <div class="form-group">
            <label>会话超时时间（分钟）</label>
            <input type="number" v-model="settings.sessionTimeout" min="15" max="480" placeholder="会话超时时间">
            <small class="form-hint">当前设置：{{ sessionTimeoutText }}</small>
          </div>
        </div>
      </div>

      <!-- 邮件设置 -->
      <div class="settings-section">
        <h3>邮件设置</h3>
        <div class="settings-form">
          <div class="form-group">
            <label>SMTP服务器</label>
            <input type="text" v-model="settings.smtp.host" placeholder="SMTP服务器地址">
          </div>
          <div class="form-group">
            <label>端口</label>
            <input type="number" v-model="settings.smtp.port" placeholder="SMTP端口">
          </div>
          <div class="form-group">
            <label>用户名</label>
            <input type="text" v-model="settings.smtp.username" placeholder="SMTP用户名">
          </div>
          <div class="form-group">
            <label>密码</label>
            <input type="password" v-model="settings.smtp.password" placeholder="SMTP密码">
          </div>
          <div class="form-group">
            <label class="checkbox-item">
              <input type="checkbox" v-model="settings.smtp.secure">
              <span>启用SSL/TLS</span>
            </label>
          </div>
          <div class="smtp-status">
            <span>连接状态：{{ smtpStatusText }}</span>
          </div>
        </div>
      </div>

      <!-- 缓存设置 -->
      <div class="settings-section">
        <h3>缓存设置</h3>
        <div class="settings-form">
          <div class="form-group">
            <label>缓存类型</label>
            <select v-model="settings.cacheType">
              <option value="memory">内存缓存</option>
              <option value="redis">Redis缓存</option>
              <option value="file">文件缓存</option>
            </select>
          </div>
          <div class="form-group">
            <label>缓存过期时间（小时）</label>
            <input type="number" v-model="settings.cacheExpire" min="1" max="168" placeholder="缓存过期时间">
            <small class="form-hint">{{ cacheExpireText }}</small>
          </div>
          <div class="cache-actions">
            <button class="btn-secondary" @click="clearCache">清除缓存</button>
            <button class="btn-primary" @click="testCache">测试缓存</button>
          </div>
        </div>
      </div>

      <!-- 系统监控 -->
      <div class="settings-section">
        <h3>系统监控</h3>
        <div class="monitor-stats">
          <div class="stat-item">
            <div class="stat-label">CPU使用率</div>
            <div class="stat-bar">
              <div class="stat-progress" :style="{ width: systemStats.cpu + '%' }"></div>
            </div>
            <div class="stat-value">{{ systemStats.cpu }}%</div>
          </div>
          <div class="stat-item">
            <div class="stat-label">内存使用率</div>
            <div class="stat-bar">
              <div class="stat-progress" :style="{ width: systemStats.memory + '%' }"></div>
            </div>
            <div class="stat-value">{{ systemStats.memory }}%</div>
          </div>
          <div class="stat-item">
            <div class="stat-label">磁盘使用率</div>
            <div class="stat-bar">
              <div class="stat-progress" :style="{ width: systemStats.disk + '%' }"></div>
            </div>
            <div class="stat-value">{{ systemStats.disk }}%</div>
          </div>
        </div>
      </div>
    </div>

    <div class="settings-actions">
      <button class="btn-secondary" @click="resetSettings">重置设置</button>
      <button class="btn-primary" @click="saveSettings">手动保存设置</button>
    </div>

    <!-- 设置变更历史 -->
    <div class="settings-history" v-if="settingsHistory.length > 0">
      <h3>最近更改</h3>
      <div class="history-list">
        <div v-for="(change, index) in settingsHistory.slice(-5)" :key="index" class="history-item">
          <span class="history-time">{{ formatTime(change.timestamp) }}</span>
          <span class="history-action">{{ change.action }}</span>
          <span class="history-field">{{ change.field }}</span>
          <span class="history-value">{{ change.newValue }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted } from 'vue'

// 响应式数据
const settings = reactive({
  siteName: '管理后台',
  siteDescription: '现代化的管理后台系统',
  contactEmail: 'admin@example.com',
  phoneNumber: '400-123-4567',
  timezone: 'Asia/Shanghai',
  language: 'zh-CN',
  theme: 'light',
  passwordPolicy: {
    minLength: true,
    requireUppercase: true,
    requireNumbers: true,
    requireSpecialChars: false
  },
  maxLoginAttempts: 5,
  sessionTimeout: 120,
  smtp: {
    host: 'smtp.example.com',
    port: 587,
    username: 'noreply@example.com',
    password: '',
    secure: true
  },
  cacheType: 'memory',
  cacheExpire: 24
})

const systemStats = reactive({
  cpu: 45,
  memory: 62,
  disk: 78
})

const isSaving = ref(false)
const showSaved = ref(false)
const settingsHistory = ref([])
const lastSaveTime = ref(null)

// 计算属性
const isDarkMode = computed(() => settings.theme === 'dark')

const passwordStrength = computed(() => {
  let strength = 0
  if (settings.passwordPolicy.minLength) strength += 25
  if (settings.passwordPolicy.requireUppercase) strength += 25
  if (settings.passwordPolicy.requireNumbers) strength += 25
  if (settings.passwordPolicy.requireSpecialChars) strength += 25
  return strength
})

const passwordStrengthText = computed(() => {
  if (passwordStrength.value <= 25) return '弱'
  if (passwordStrength.value <= 50) return '中等'
  if (passwordStrength.value <= 75) return '强'
  return '很强'
})

const strengthClass = computed(() => {
  if (passwordStrength.value <= 25) return 'weak'
  if (passwordStrength.value <= 50) return 'medium'
  if (passwordStrength.value <= 75) return 'strong'
  return 'very-strong'
})

const sessionTimeoutText = computed(() => {
  const hours = Math.floor(settings.sessionTimeout / 60)
  const minutes = settings.sessionTimeout % 60
  if (hours > 0) {
    return `${hours}小时${minutes > 0 ? minutes + '分钟' : ''}`
  }
  return `${minutes}分钟`
})

const cacheExpireText = computed(() => {
  if (settings.cacheExpire === 24) return '1天'
  if (settings.cacheExpire < 24) return `${settings.cacheExpire}小时`
  return `${Math.floor(settings.cacheExpire / 24)}天`
})

const smtpStatusText = computed(() => {
  if (settings.smtp.host && settings.smtp.port && settings.smtp.username) {
    return '已配置'
  }
  return '未配置'
})

// Watch 示例1: 监听主题变化并应用到document
watch(() => settings.theme, (newTheme, oldTheme) => {
  console.log(`主题从 ${oldTheme} 切换到 ${newTheme}`)
  
  // 应用主题到document类
  document.documentElement.setAttribute('data-theme', newTheme)
  
  // 记录变更历史
  // addToHistory('主题切换', 'theme', newTheme)
  
  // 保存主题设置到localStorage
  localStorage.setItem('app-theme', newTheme)
  
  // 显示切换提示
  // showNotification(`已切换到${newTheme === 'dark' ? '深色' : '浅色'}主题`)
}, { immediate: true })

// Watch 示例2: 深度监听密码策略变化
watch(() => settings.passwordPolicy, (newPolicy, oldPolicy) => {
  console.log('密码策略已更改:', newPolicy)
  
  // 计算变更的字段
  const changes = []
  Object.keys(newPolicy).forEach(key => {
    if (oldPolicy && newPolicy[key] !== oldPolicy[key]) {
      changes.push(key)
    }
  })
  
  if (changes.length > 0) {
    addToHistory('密码策略更新', 'passwordPolicy', `更新了${changes.length}项规则`)
    autoSave()
  }
}, { deep: true })

// Watch 示例3: 监听SMTP设置变化并验证
watch(() => settings.smtp, (newSmtp) => {
  console.log('SMTP设置已更改:', newSmtp)
  
  // 延迟验证SMTP设置
  if (smtpValidationTimer) {
    clearTimeout(smtpValidationTimer)
  }
  
  smtpValidationTimer = setTimeout(() => {
    validateSmtpSettings(newSmtp)
  }, 1000)
}, { deep: true })

// Watch 示例4: 监听会话超时时间变化
watch(() => settings.sessionTimeout, (newTimeout, oldTimeout) => {
  if (newTimeout !== oldTimeout) {
    console.log(`会话超时时间从 ${oldTimeout} 分钟改为 ${newTimeout} 分钟`)
    
    addToHistory('会话设置', 'sessionTimeout', `${newTimeout}分钟`)
    
    // 如果超时时间过短，给出警告
    if (newTimeout < 30) {
      showNotification('警告：会话超时时间过短可能影响用户体验', 'warning')
    }
    
    autoSave()
  }
})

// Watch 示例5: 监听语言变化
watch(() => settings.language, (newLang, oldLang) => {
  if (newLang !== oldLang) {
    console.log(`语言从 ${oldLang} 切换到 ${newLang}`)
    
    addToHistory('语言切换', 'language', newLang)
    
    // 模拟语言包加载
    loadLanguagePack(newLang)
  }
})

// Watch 示例6: 监听缓存设置变化
watch([() => settings.cacheType, () => settings.cacheExpire], ([newType, newExpire], [oldType, oldExpire]) => {
  if (newType !== oldType || newExpire !== oldExpire) {
    console.log(`缓存设置变更: 类型=${newType}, 过期时间=${newExpire}小时`)
    
    addToHistory('缓存设置', 'cache', `${newType} - ${newExpire}小时`)
    
    // 清除旧缓存
    if (newType !== oldType) {
      showNotification('缓存类型已更改，建议清除现有缓存')
    }
    
    autoSave()
  }
}, { immediate: false })

// 变量
let smtpValidationTimer = null
let autoSaveTimer = null

// 方法
const autoSave = () => {
  if (autoSaveTimer) {
    clearTimeout(autoSaveTimer)
  }
  
  isSaving.value = true
  
  autoSaveTimer = setTimeout(async () => {
    try {
      // 模拟保存API调用
      await new Promise(resolve => setTimeout(resolve, 800))
      
      isSaving.value = false
      showSaved.value = true
      lastSaveTime.value = Date.now()
      
      setTimeout(() => {
        showSaved.value = false
      }, 2000)
      
      console.log('设置已自动保存')
    } catch (error) {
      isSaving.value = false
      console.error('自动保存失败:', error)
    }
  }, 1500) // 1.5秒后自动保存
}

const addToHistory = (action, field, newValue) => {
  settingsHistory.value.push({
    action,
    field,
    newValue,
    timestamp: Date.now()
  })
}

const validateSmtpSettings = async (smtpConfig) => {
  if (smtpConfig.host && smtpConfig.port && smtpConfig.username) {
    console.log('验证SMTP设置...')
    // 模拟SMTP验证
    try {
      await new Promise(resolve => setTimeout(resolve, 1000))
      showNotification('SMTP设置验证成功')
    } catch (error) {
      showNotification('SMTP设置验证失败', 'error')
    }
  }
}

const loadLanguagePack = async (language) => {
  console.log(`正在加载 ${language} 语言包...`)
  // 模拟语言包加载
  await new Promise(resolve => setTimeout(resolve, 500))
  showNotification(`${language} 语言包加载完成`)
}

const showNotification = (message, type = 'info') => {
  console.log(`[${type.toUpperCase()}] ${message}`)
  // 这里可以显示实际的通知组件
}

const saveSettings = async () => {
  isSaving.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 1000))
    isSaving.value = false
    showSaved.value = true
    
    setTimeout(() => {
      showSaved.value = false
    }, 2000)
    
    showNotification('设置保存成功')
  } catch (error) {
    isSaving.value = false
    showNotification('设置保存失败', 'error')
  }
}

const resetSettings = () => {
  if (confirm('确定要重置所有设置吗？')) {
    // 重置设置逻辑
    Object.assign(settings, {
      siteName: '管理后台',
      siteDescription: '现代化的管理后台系统',
      contactEmail: 'admin@example.com',
      phoneNumber: '400-123-4567',
      timezone: 'Asia/Shanghai',
      language: 'zh-CN',
      theme: 'light',
      passwordPolicy: {
        minLength: true,
        requireUppercase: true,
        requireNumbers: true,
        requireSpecialChars: false
      },
      maxLoginAttempts: 5,
      sessionTimeout: 120,
      smtp: {
        host: 'smtp.example.com',
        port: 587,
        username: 'noreply@example.com',
        password: '',
        secure: true
      },
      cacheType: 'memory',
      cacheExpire: 24
    })
    
    addToHistory('重置设置', 'all', '所有设置已重置')
    showNotification('设置已重置')
  }
}

const clearCache = async () => {
  try {
    await new Promise(resolve => setTimeout(resolve, 1000))
    showNotification('缓存清除成功')
  } catch (error) {
    showNotification('缓存清除失败', 'error')
  }
}

const testCache = async () => {
  try {
    await new Promise(resolve => setTimeout(resolve, 2000))
    showNotification('缓存测试成功')
  } catch (error) {
    showNotification('缓存测试失败', 'error')
  }
}

const formatTime = (timestamp) => {
  const date = new Date(timestamp)
  return date.toLocaleTimeString('zh-CN', { 
    hour: '2-digit', 
    minute: '2-digit', 
    second: '2-digit' 
  })
}

// 组件挂载时的初始化
onMounted(() => {
  // 从localStorage加载主题设置
  const savedTheme = localStorage.getItem('app-theme')
  if (savedTheme) {
    settings.theme = savedTheme
  }
  
  // 模拟系统监控数据更新
  setInterval(() => {
    systemStats.cpu = Math.floor(Math.random() * 100)
    systemStats.memory = Math.floor(Math.random() * 100)
    systemStats.disk = Math.floor(Math.random() * 100)
  }, 5000)
  
  console.log('设置页面已初始化')
})
</script>

<style scoped>
.settings-page {
  animation: fadeIn 0.3s ease-in-out;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.settings-page.dark-theme {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.page-header h2 {
  color: #2c3e50;
  margin: 0;
  font-size: 28px;
}

.dark-theme .page-header h2 {
  color: #e0e0e0;
}

.auto-save-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #7f8c8d;
  transition: all 0.3s ease;
}

.auto-save-status.saving {
  color: #f39c12;
}

.auto-save-status.saved {
  color: #27ae60;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

.settings-section {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.dark-theme .settings-section {
  background: #2a2a2a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.settings-section h3 {
  color: #2c3e50;
  margin: 0 0 20px 0;
  font-size: 18px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 12px;
}

.dark-theme .settings-section h3 {
  color: #e0e0e0;
  border-bottom-color: #404040;
}

.theme-preview-area {
  margin-top: 20px;
  padding: 16px;
  border-radius: 8px;
  background: #f8f9fa;
}

.dark-theme .theme-preview-area {
  background: #1e1e1e;
}

.preview-card {
  background: white;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.preview-card.dark {
  background: #2a2a2a;
  color: #e0e0e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.preview-card h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
}

.preview-card.dark h4 {
  color: #e0e0e0;
}

.policy-strength {
  margin-top: 12px;
}

.strength-bar {
  width: 100%;
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}

.strength-fill {
  height: 100%;
  transition: width 0.3s ease, background-color 0.3s ease;
  border-radius: 3px;
}

.strength-fill.weak {
  background: #e74c3c;
}

.strength-fill.medium {
  background: #f39c12;
}

.strength-fill.strong {
  background: #3498db;
}

.strength-fill.very-strong {
  background: #27ae60;
}

.form-hint {
  display: block;
  font-size: 12px;
  color: #7f8c8d;
  margin-top: 4px;
}

.smtp-status {
  margin-top: 12px;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 4px;
  font-size: 12px;
}

.dark-theme .smtp-status {
  background: #1e1e1e;
}

.settings-history {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 30px;
}

.dark-theme .settings-history {
  background: #2a2a2a;
}

.settings-history h3 {
  color: #2c3e50;
  margin: 0 0 16px 0;
  font-size: 18px;
}

.dark-theme .settings-history h3 {
  color: #e0e0e0;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-item {
  display: flex;
  gap: 12px;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 6px;
  font-size: 12px;
}

.dark-theme .history-item {
  background: #1e1e1e;
}

.history-time {
  color: #7f8c8d;
  min-width: 70px;
}

.history-action {
  color: #3498db;
  min-width: 80px;
}

.history-field {
  color: #e67e22;
  min-width: 100px;
}

.history-value {
  color: #27ae60;
  flex: 1;
}

/* 继承原有样式 */
.settings-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 500;
  color: #2c3e50;
  font-size: 14px;
}

.dark-theme .form-group label {
  color: #e0e0e0;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s ease, background-color 0.3s ease;
}

.dark-theme .form-group input,
.dark-theme .form-group select,
.dark-theme .form-group textarea {
  background: #1e1e1e;
  border-color: #404040;
  color: #e0e0e0;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #3498db;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}

.checkbox-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.theme-options {
  display: flex;
  gap: 16px;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-option.active {
  border-color: #3498db;
  background: #f8f9fa;
}

.dark-theme .theme-option.active {
  background: #1e1e1e;
}

.theme-preview {
  width: 60px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.theme-preview.light {
  background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
}

.theme-preview.dark {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

.cache-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.monitor-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stat-label {
  width: 100px;
  font-size: 14px;
  color: #2c3e50;
}

.dark-theme .stat-label {
  color: #e0e0e0;
}

.stat-bar {
  flex: 1;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.dark-theme .stat-bar {
  background: #404040;
}

.stat-progress {
  height: 100%;
  background: linear-gradient(90deg, #3498db 0%, #2980b9 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.stat-value {
  width: 40px;
  text-align: right;
  font-size: 14px;
  color: #2c3e50;
  font-weight: 600;
}

.dark-theme .stat-value {
  color: #e0e0e0;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dark-theme .settings-actions {
  background: #2a2a2a;
}

.btn-primary {
  background: #3498db;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s ease;
}

.btn-primary:hover {
  background: #2980b9;
}

.btn-secondary {
  background: #95a5a6;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s ease;
}

.btn-secondary:hover {
  background: #7f8c8d;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
  
  .theme-options {
    flex-direction: column;
  }
  
  .cache-actions {
    flex-direction: column;
  }
  
  .settings-actions {
    flex-direction: column;
  }
  
  .history-item {
    flex-direction: column;
    gap: 4px;
  }
}
</style> 